<template>
  <div class="preview-wrap" v-show="element.isShow" :style="style">
    <ComponentBg v-if="defaultStyle.backgroundColor" :bg="defaultStyle" />
    <slot />
  </div>
</template>

<script>
import { getGeometricStyle } from '../../../../lib/utils'
import { runAnimation } from '../../../../lib/animate'
import ComponentBg from '../../../../../common/ComponentBg'
export default {
  props: {
    defaultStyle: {
      type: Object,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {
    style() {
      return {
        position: 'absolute',
        overflow: 'hidden',
        borderRadius: `${this.defaultStyle.borderRadius}px`,
        ...getGeometricStyle(this.defaultStyle),
      }
    },
  },
  mounted() {
    const component = this.element
    if (component.props.isPreview && component.animations.isEnable) {
      runAnimation(this.$el, component.animations.list, undefined, component)
    }
  },
  components: {
    ComponentBg,
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
